<script setup>
import {ref} from 'vue'
const showy1 = ref(false)
const gotoy1 = (url) =>{
  showy1.value = true
  uni.navigateTo({
    url:'/pages/index/index_weijiananxiangqing'
  });
}
</script>

<template>
  <view>
    <button class="ydd1" @click="gotoy1('/pages/index/index_weijiananxiangqing')">gnsryjyrjy</button>
    <view class="Yd7">
      <image class="pg111" src="/static/pg111.png"></image>
      <text class="t111">创建于:2023.03.20</text>
      <text class="t112">未结案</text>
      <view class="Yd9"></view>
      <view class="Yd10"></view>
      <view class="Yd11"></view>
      <text class="t113">打架斗殴</text>
      <text class="t114">是</text>
      <text class="t115">9</text>
      <text class="t116">突发事件类型</text>
      <text class="t117">是否报送心理健康中心</text>
      <text class="t118">涉及学生人数</text>
      <view class="Yd12">
        <text class="t119">突发事件概述：</text>
        <text class="t120">打架斗殴打架斗殴打架斗殴打架斗殴打架斗殴</text>
      </view>
      <text class="t121">事件ID：202303235456789</text>
    </view>
    <button class="ydd1" @click="gotoy1('/pages/index/index_weijiananxiangqing')">gnsryjyrjy</button>
    <view class="Yd8">
      <image class="pg111" src="/static/pg111.png"></image>
      <text class="t111">创建于:2023.03.20</text>
      <text class="t112">未结案</text>
      <view class="Yd9"></view>
      <view class="Yd10"></view>
      <view class="Yd11"></view>
      <text class="t113">打架斗殴</text>
      <text class="t114">是</text>
      <text class="t115">9</text>
      <text class="t116">突发事件类型</text>
      <text class="t117">是否报送心理健康中心</text>
      <text class="t118">涉及学生人数</text>
      <view class="Yd12">
        <text class="t119">突发事件概述：</text>
        <text class="t120">打架斗殴打架斗殴打架斗殴打架斗殴打架斗殴</text>
      </view>
      <text class="t121">事件ID：202303235456789</text>
    </view>
  </view>
</template>

<style>
.Yd7{
  width: 340px;
  height: 185px;
  background-color: white;
  position: absolute;
  left: 10px;
  top: 10px;
  border-radius: 5px 5px 5px 5px;
  z-index: 3;
}
.Yd8{
  width: 340px;
  height: 185px;
  background-color: white;
  position: absolute;
  left: 10px;
  top: 205px;
  border-radius: 5px 5px 5px 5px;
}
.pg111{
  width: 11px;
  height: 16px;
  position: absolute;
  top: 12px;
  left: 7px;
}
.t111{
  position: absolute;
  left: 22px;
  top: 8px;
}
.t112{
  position: absolute;
  right: 10px;
  top: 7px;
  font-size: 14px;
  color: #ffa216;
}
.Yd9{
  width: 320px;
  height: 2px;
  background-color: #f5f5f5;
  position: absolute;
  top: 40px;
  left: 10px;
}
.Yd10{
  width: 2px;
  height: 25px;
  background-color: #f5f5f5;
  position: absolute;
  top: 60px;
  left: 100px;
}
.Yd11{
  width: 2px;
  height: 25px;
  background-color: #f5f5f5;
  position: absolute;
  top: 60px;
  right: 100px;
}
.t113{
  position: absolute;
  top: 50px;
  left: 23px;
  font-size: 13px;
}
.t114{
  position: absolute;
  top: 50px;
  left: 165px;
  font-size: 13px;
}
.t115{
  position: absolute;
  top: 50px;
  left: 285px;
  font-size: 13px;
}
.t116{
  position: absolute;
  top: 70px;
  left: 20px;
  font-size: 10px;
  color: #808080;
}
.t117{
  position: absolute;
  top: 70px;
  left: 122px;
  font-size: 10px;
  color: #808080;
}
.t118{
  position: absolute;
  top: 70px;
  right: 20px;
  font-size: 10px;
  color: #808080;
}
.Yd12{
  width: 310px;
  height: 50px;
  background-color: #F5F5F5;
  position: absolute;
  top: 100px;
  left: 15px;
  border-radius: 5px 5px 5px 5px;
}
.t119{
  font-size: 10px;
  color: #808080;
  position: absolute;
  top: 5px;
  left: 9px;
}
.t120{
  font-size: 10px;
  color: black;
  position: absolute;
  top: 25px;
  left: 9px;
}
.t121{
  position: absolute;
  top: 160px;
  left: 16px;
  color: #808080;
  font-size: 10px;
}
.ydd1{
  width: 340px;
  height: 185px;
  background-color: chartreuse;
  position: absolute;
  left: 10px;
  top: 10px;
  border-radius: 5px 5px 5px 5px;
  z-index: 5;
  opacity: 0;
}
</style>